<template>
	<div class="notice-detail">
		<div class="banner"></div>
		<div class="tab-box">
			<div class="tab-wrap">
				<div class="tab-menu">
					<div class="tab-item active">公告详情</div>
				</div>
			</div>
		</div>
		<div class="tab-content">
			<div class="content-wrap">
				<div class="detail-box">
					<div class="detail-title">{{ detail.title }}</div>
					<div class="sub-box">
						<div class="date">日期：{{ detail.date }}</div>
						<div class="origin">作者：{{ detail.created }}</div>
					</div>
					<div class="content" v-html="detail.content"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getNotice } from '@/api/system/notice';
export default {
	name: 'NoticeDetail',
	data() { 
		return {
			//详情
			detail: {}
		}
	},
	mounted() { 
		this.queryDetail();
	},
	methods: {
		/**
		 * 详情查询
		 */
		async queryDetail() { 
			let res = await getNotice(this.$route.query.id)
			if (res.code == 200) { 
				this.detail = {
					id: res.data.noticeId,
					title: res.data.noticeTitle,
					content: res.data.noticeContent,
					date: res.data.updateTime ? res.data.updateTime.slice(0, 10) : res.data.createTime.slice(0, 10),
					ceated: res.data.createBy
				};
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.notice-detail {
	width: 100%;
	min-height: 760px;
	.banner {
		width: 100%;
		height: 140px;
		background-image: url('~@/assets/images/list-banner.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 -100px;
	}
	.tab-box {
		width: 100%;
		height: 60px;
		background-color: #fff;
		border-bottom: 1px solid #e0e0e0;
		.tab-wrap {
			display: flex;
			width: 1280px;
			height: 100%;
			margin: 0 auto;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		.tab-menu {
			display: flex;
			height: 100%;
			flex-direction: row;
			align-items: center;
			.tab-item {
				display: flex;
				font-size: 18px;
				font-weight: bold;
				width: 150px;
				text-align: center;
				transition: all .2s;
				cursor: pointer;
				letter-spacing: 2px;
				&.active {
					color: #000;
					font-size: 20px;
				}
			}
		}
	}
	.tab-content {
		width: 100%;
		background: rgba(255,255,255, .9);
		.content-wrap {
			width: 1280px;
			margin: 0 auto;
			padding: 30px 0 50px 0;
		}
		.detail-box {
			width: 100%;
			.detail-title {
				width: 100%;
				font-size: 24px;
				color: #222;
				text-align: center;
				line-height: 36px;
				margin-bottom: 30px;
			}
			.sub-box {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				color: #666;
				border-bottom: 1px solid #d5d5d5;
				padding-bottom: 15px;
				.date {
					margin-right: 100px;
				}
			}
			.content {
				padding-top: 20px;
				color: #333;
				line-height: 32px;
				font-size: 16px;
				text-indent: 32px;
				img {
					margin: 0 auto;
					width: 600px;
				}
			}
		}
	}
}
</style>